import dt from '@dt/dt'
import textOpt from '../info/text'

function arrow(vm, h, opt) {
  let filter = vm.$refs.filter || vm.$$filter || vm.$children.find((i) => i.$$filter).$$filter
  return [
    h('div', [
      h('span', opt.title),
      h('Icon', {
        props: {
          type: 'ios-arrow-down',
          size: '16'
        },
        style: {
          marginLeft: '5px'
        },
        nativeOn: {
          mouseover: (e) => {
            filter.onMouseover(e, opt)
          },
          mouseleave: (e) => {
            filter.onMouseleave(e)
          }
        }
      })
    ])
  ]
}

function headerSel(vm, h, opt) {
  let options = opt.options.reduce((arr, item) => {
    arr.push(
      h('Option', {
        props: {
          value: item.key,
          label: item.value,
          key: item.key,
          disabled: item.disabled || false
        }
      })
    )
    return arr
  }, [])
  return [
    h(
      'Select',
      {
        props: {
          value: opt.val || opt.data[opt.key],
          multiple: opt.multiple || false,
          placeholder: opt.placeholder || '请选择',
          transfer: true
        },
        style: {
          width: opt.width || '200px'
        },
        on: {
          'on-change': (e) => {
            if (opt.change) opt.change(e)
          }
        }
      },
      options
    )
  ]
}

function spanA(_this, h, opt) {
  return [
    h(
      'span',
      {
        style: {},
        on: {}
      },
      opt.title
    ),
    h(
      'span',
      {
        style: {
          cursor: 'pointer',
          color: '#2d8cf0',
          marginLeft: '5px',
          fontSize: '12px'
        },
        on: {
          click: (e) => {
            if (opt.event) {
              _this[opt.event](opt.data)
            }
          }
        }
      },
      opt.tit
    )
  ]
  // return [h('span', {
  //   style: {},
  //   on: {},
  // }, opt.text), h('span', {
  //   style: {
  //     cursor: 'pointer',
  //     color: '#2d8cf0'
  //   },
  //   on: {
  //     click: (e) => {
  //       if (opt.event) {
  //         _this[opt.event](opt.data)
  //       }
  //     }
  //   },
  // }, opt.text)]
}

function btn(vm, h, opt) {
  return [
    h(
      'span',
      {
        style: {
          color: opt.color || '#3366ff',
          cursor: 'pointer',
          marginRight: opt.title ? '8px' : ''
        },
        on: {
          click: (e) => {
            if (opt.event) {
              vm[opt.event](opt.data)
            } else if (opt.click) {
              opt.click(opt.data)
            }
          }
        }
      },
      textOpt.handle(opt, opt.title)
    )
  ]
}
// 新增icon
function icon(vm, h, opts) {
  let bs = []

  opts.forEach((opt) => {
    bs.push(
      h(
        'icon',
        {
          class: 'ivu-icon-' + opt.type,
          style: opt.style,

          on: {
            click: (e) => {
              vm[opt.event](opt.data)
            }
          }
        },
        opt.title
      )
    )
  })
  return bs
}

function btns(vm, h, opts) {
  let bs = []
  opts.forEach((opt) => {
    bs.push(
      h(
        'span',
        {
          style: {
            color: opt.color || '#3366ff',
            cursor: 'pointer',
            marginRight: opt.title ? '8px' : ''
          },
          on: {
            click: (e) => {
              if (opt.event) {
                vm[opt.event](opt.data)
              } else if (opt.click) {
                opt.click(opt.data)
              }
            }
          }
        },
        opt.title
      )
    )
  })
  return bs
}

function text(h, opt = {}) {
  return [
    h('dt-info-edit-text', {
      props: {
        option: opt,
        value: opt.value
      }
    })
  ]
}

function edit(h, option, info) {
  return [
    h('dt-info-edit', {
      props: {
        option,
        info
      }
    })
  ]
}

function group(h, option, info) {
  return [
    h('dt-info-edit-group', {
      props: {
        option: {
          group: option
        },
        info
      }
    })
  ]
}

function input(_this, h, opt) {
  return [
    h('Input', {
      props: {
        value: opt.data[opt.key],
        type: opt.type || 'text',
        min: opt.min,
        placeholder: opt.placeholder || '请输入',
        disabled: opt.disabled || false
      },
      style: {
        width: opt.width || null
      },
      on: {
        input: (e) => {
          opt.data[opt.key] = e
        },
        'on-focus': (e) => {
          if (opt.focus) opt.focus(opt.key)
          e.target.addEventListener(
            'wheel',
            function (e) {
              e = e || window.event
              if (e.preventDefault) {
                // Firefox
                e.preventDefault()
                e.stopPropagation()
              } else {
                // IE
                e.cancelBubble = true
                e.returnValue = false
              }
            },
            { passive: false }
          )
        },
        'on-blur': () => {
          if (opt.blur) opt.blur(opt.key)
        }
      }
    })
  ]
}

function inputNumber(_this, h, opt) {
  return [
    h('InputNumber', {
      props: {
        value: Number(opt.data[opt.key]) || null,
        min: opt.min || 0,
        placeholder: opt.placeholder || '请输入',
        precision: opt.precision || 0
      },
      style: {
        width: opt.width || null
      },
      on: {
        input: (e) => {
          opt.data[opt.key] = e
          if (e == 0) {
            opt.input && opt.input()
          }
        },
        'on-blur': () => {
          if (opt.blur) opt.blur(opt.key)
        }
      }
    })
  ]
}

function img(_this, h, opt, numLength) {
  return [
    h('img', {
      style: {
        display: opt.data.length > 0 ? 'inline-block' : 'none',
        width: '50px',
        height: '50px',
        textAlgn: 'center',
        cursor: 'pointer',
        display: 'block',
        objectFit: 'contain'
      },
      attrs: {
        src: opt.src
      },
      on: {
        click: (e) => {
          if (opt.event) {
            _this[opt.event](opt.data)
          }
        }
      }
    }),
    h(
      'span',
      {
        style: {
          display: numLength && opt.data.length > 1 ? 'inline-block' : 'none',
          width: '50px',
          height: '50px',
          verticalAlign: '20px'
        }
      },
      '等' + opt.data.length + '个'
    ),
    h(
      'span',
      {
        style: {
          display: numLength && opt.data.length < 1 ? 'inline-block' : 'none'
        }
      },
      '-'
    )
  ]
}

function select(_this, h, opt) {
  let options = opt.options.reduce((arr, item) => {
    arr.push(
      h('Option', {
        props: {
          value: item.key,
          label: item.value,
          key: item.key,
          disabled: item.disabled || false
        }
      })
    )
    return arr
  }, [])
  return [
    h(
      'Select',
      {
        props: {
          value: opt.data[opt.key],
          multiple: opt.multiple,
          placeholder: opt.placeholder || '请选择',
          transfer: true
        },
        style: {
          width: opt.width || null
        },
        on: {
          'on-change': (e) => {
            opt.data[opt.key] = e
            if (opt.change) opt.change(opt.key)
          }
        }
      },
      options
    )
  ]
}
// Tooltip
function Tooltip(h, opts = {}) {
  return [
    h('div', [
      h('span', {}, opts.title),
      h(
        'Tooltip',
        {
          props: {
            placement: opts.placement || 'top-start',
            content: opts.tipsTxt || '-',
            transfer: opts.transfer || true,
            trigger: opts.trigger || 'hover',
            offset: opts.offset || '-13',
            theme: opts.theme || 'dark'
          },
          style: {
            ...opts.TooltipStyle
          }
        },
        [
          h('Icon', {
            props: {
              type: opts.icon
            },
            style: {
              ...opts.iconStyle
            }
          })
        ]
      )
    ])
  ]
}

function requiredTxt(h, opts = {}) {
  return [
    h('div', [
      h(
        'span',
        {
          style: {
            color: 'red',
            marginRight: '5px'
          }
        },
        '*'
      ),
      h('span', {}, opts.title)
    ])
  ]
}

function tree(h, row, render, config, update) {
  return [
    h(
      'dt-tree-icon',
      {
        props: { row, config },
        on: { update }
      },
      [render]
    )
  ]
}

function option(vm, opt, field, row, h) {
  if (opt.text) {
    let value = opt.value ? opt.value(row) : field && row ? dt.getVal(row, field) : opt.placeholder
    return text(h, {
      ...opt.text,
      value
    })
  } else if (opt.btn) {
    let valid = (b) => {
      return b.visible != false && (!b.code || vm.unlocking(b.code))
    }
    if (Array.isArray(opt.btn)) {
      let bs = []
      opt.btn.forEach((b) => {
        let nb = { ...b }
        if (valid(nb)) {
          if (!nb.data) {
            nb.data = row
          }
          bs.push(nb)
        }
      })
      return btns(vm, h, bs)
    } else {
      let nb = { ...opt.btn }
      if (!nb.data) {
        nb.data = row
      }
      if (valid(nb)) {
        return btn(vm, h, nb)
      }
      return []
    }
  } else if (opt.filter) {
    return arrow(vm, h, opt.filter)
  } else if (opt.edit) {
    if (!opt.edit.key) {
      opt.edit.key = field
    }
    return edit(h, opt.edit, row)
  } else if (opt.group) {
    return group(h, opt.group, row)
  } else if (opt.Tooltip) {
    return Tooltip(h, opt.Tooltip)
  } else if (opt.requiredTxt) {
    return requiredTxt(h, opt.requiredTxt)
  }
}

export default {
  option,
  header: {
    arrow,
    headerSel
  },
  cell: {
    btn,
    btns,
    text,
    input,
    inputNumber,
    select,
    edit,
    icon,
    img,
    tree,
    spanA
  }
}
